<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="800" height="800"></canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);//清除画布
    //pen.save();
    //pen.translate(400,400);
    pen.arc(400,400,200,0,Math.PI*2,true);
    pen.stroke();
    pen.clip();

    var img=new Image;
    img.src="img/21.jpg";
    img.onload=function(){
        pen.drawImage(img,340,280,400,400,200,200,400,400);
    };
    //pen.restore();

//    //画表盘上的时刻
//    for(var i=1;i<=12;i++){
//        pen.save();
//        pen.translate(400,400);
//        pen.rotate(Math.PI/180*30*i);
//        pen.moveTo(0,-180);
//        pen.lineTo(0,-200);
//        pen.stroke();
//        pen.restore();
//    }
//
//    //分
//    for(var j=1;j<=60;j++){
//        pen.save();
//        pen.translate(400,400);
//        pen.rotate(Math.PI/180*6*j);
//        pen.moveTo(0,-190);
//        pen.lineTo(0,-200);
//        pen.stroke();
//        pen.restore();
//    }
</script>,
</body>
</html>